<template>
  <div>
    <div class="detail">
      <span class="title">作者详细信息</span>
      <!-- <span id="link" @click="$emit('change','')">&#60;&nbsp;返回书籍列表</span> -->
      <div class="info-main1">
        <span id="img-div"><viewer><img :src="require(`../images/images/${author}.jpg`)"></viewer></span>
        <div class="info-text">
          <p>{{ authorDetail.author }}</p>
          <div class="list-left">
            <span>国籍：{{ authorDetail.nationnality }}</span>
            <span>生卒：{{ authorDetail.date }}</span>
          </div>
          <div class="list-right">
            <span>名言：{{ authorDetail.knowledge }}</span>
            <span>书籍名称：{{ authorDetail.bookname }}</span>
          </div>
        </div>
      </div>
      <div class="brief">
        <dl>
          <dt>生平简介:</dt>
          <dd>{{ authorDetail.Biography }}</dd>
        </dl>
        <dl>
          <dt>主要作品:</dt>
          <dd>{{ authorDetail.literature }}</dd>
        </dl>
      </div>
      <p></p>
      <p></p>
      <template>
        <Bookitems :books="booksByAuthor" :mess="mess" @change="onchange"></Bookitems>
      </template>
    </div>
  
  </div>
</template>

<script>
import { books } from "../data/books";
import { authors } from "../data/authors";
import Bookitems from '../components/authorbooks.vue';

export default {
  name: "Author",
  props: {
    author: Number, // 传入的作者ID
  },
  components: { //组件
    Bookitems,
  },
  data() {
    return {
      authorDetail: {}, // 初始作者详细信息
      booksByAuthor: [], // 该作者的书籍列表
       mess: '',
       book:{}
    };
  },
  methods: {
    goBack() {
      this.$emit('change', null);
    },
    fetchBooksByAuthor(authorId) {
      this.booksByAuthor = books.filter(book => book.id === authorId);
    },
    onchange(book) {
      console.log(4);
      console.log(book.bookname);
      this.book=book;
      this.$emit('change', book);
    }
  },
  watch: {
    author: {
      immediate: true,
      handler(newAuthor) {
        // 在作者 ID 改变时获取作者详细信息
        this.authorDetail = authors.find(author => author.id === newAuthor) || {};
        this.fetchBooksByAuthor(newAuthor); // 获取该作者的书籍
      }
    }
  }
};
</script>


<style scoped>

.card {
 width: 190px;
 height: 254px;
 background: white;
 border-radius: 10px;
 transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shadow {
 box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(190, 190, 190),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}


.detail {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

#link {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
  margin-left: 20px;
}

.info-main1 {
  display: flex;
  margin-top: 20px;
}

#img-div {
  flex: 1;
  text-align: center;
}

#img-div img {
  max-width: 100%;
  height: 223px;
}

.info-text {
  flex: 2;
  margin-left: 20px;
}

.list-left,
.list-right {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.list-left span,
.list-right span {
  margin-bottom: 5px;
}

.primary-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}

.primary-button:hover {
  background-color: #0056b3;
}

.interactions {
  margin-top: 20px;
}

.interaction-button {
  background-color: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  margin-right: 10px;
}

.interaction-button:hover {
  background-color: #e0e0e0;
}

.liked {
  background-color: #4CAF50; /* 绿色 */
  color: white;
}

.disliked {
  background-color: #f44336; /* 红色 */
  color: white;
}

.rating-section {
  margin-top: 10px;
}

.comment-section {
  margin-top: 20px;
}

.comment-section textarea {
  width: 96%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.comments {
  margin-top: 20px;
}

.comments ul {
  list-style-type: none;
  padding: 0;
}

.comments li {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
}
</style>



</script>
<style src="../style/detail.css" scoped>

</style> -->